// src/pages/Home/DataAnalysis/index.js
import React, { useState } from 'react';
import { Tabs, Card, Row, Col, Statistic, Space, Button } from 'antd';
import {
  BarChartOutlined,
  AppstoreOutlined,
  FundOutlined,
  DashboardOutlined,
  DatabaseOutlined
} from '@ant-design/icons';
import Dashboard from './Dashboard';
import ReportTemplateMarket from './ReportTemplateMarket';

const { TabPane } = Tabs;

const DataAnalysis = () => {
  const [activeTab, setActiveTab] = useState('dashboard');

  return (
    <div style={{ padding: '24px' }}>
      <div style={{ marginBottom: 24 }}>
        <h2>数据分析中心</h2>
        <p>从数据中发现价值，通过可视化洞察业务趋势</p>
      </div>

      <Card style={{ marginBottom: 24 }}>
        <Row gutter={16}>
          <Col span={6}>
            <Statistic title="数据源" value={12} prefix={<DatabaseOutlined />} />
          </Col>
          <Col span={6}>
            <Statistic title="仪表板" value={8} prefix={<DashboardOutlined />} />
          </Col>
          <Col span={6}>
            <Statistic title="图表数" value={42} prefix={<BarChartOutlined />} />
          </Col>
          <Col span={6}>
            <Statistic title="模板" value={24} prefix={<AppstoreOutlined />} />
          </Col>
        </Row>
      </Card>

      <Tabs
        activeKey={activeTab}
        onChange={setActiveTab}
        items={[
          {
            key: 'dashboard',
            label: (
              <Space>
                <DashboardOutlined />
                数据仪表板
              </Space>
            ),
            children: <Dashboard />,
          },
          {
            key: 'templateMarket',
            label: (
              <Space>
                <AppstoreOutlined />
                模板市场
              </Space>
            ),
            children: <ReportTemplateMarket />,
          },
          {
            key: 'advancedAnalysis',
            label: (
              <Space>
                <FundOutlined />
                高级分析
              </Space>
            ),
            children: (
              <div style={{ padding: '24px', textAlign: 'center' }}>
                <h3>高级分析功能即将上线</h3>
                <p>包括预测分析、关联分析、聚类分析等高级功能</p>
                <Button type="primary">敬请期待</Button>
              </div>
            ),
          },
        ]}
      />
    </div>
  );
};

export default DataAnalysis;
